<template>
    <div class="detail">
        <!-- 轮播图 -->
        <Myswiper :bannerArr="galleryArr"></Myswiper>
        <!-- 产品信息 -->
        <p>{{ (infoobj as Iinfoobj).name }}</p>
        <p>{{ (infoobj as Iinfoobj).retail_price }}</p>
        <!-- 商品属性列表 -->
        <ul>
            <li v-for="(item, index) in attributeArr" :key="index">
                <span>{{ item.name }}</span>&nbsp;&nbsp;<span>{{ item.value }}</span>
            </li>
        </ul>
        <!-- 产品详情 -->
        <div class="goods_desc" v-html="(infoobj as Iinfoobj).goods_desc"></div>
        <!-- 相关产品 -->
        <ul class="goodsrelated">
            <li v-for="item in goodsrelatedArr" :key="item.id">
                <img :src="item.list_pic_url" alt="">
                <p>{{ item.name }}</p>
                <p>${{ item.retail_price.toFixed(2) }}元</p>
            </li>
        </ul>
        <!-- 加入购物车---立即购买操作栏 -->
        <van-action-bar>
            <van-action-bar-icon icon="star" text="未收藏" />
            <van-action-bar-icon icon="cart-o" text="购物车" :badge="goodscount" @click="$router.push('/car')" />
            <van-action-bar-button type="warning" @click="isshowsheet = true" text="加入购物车" />
            <van-action-bar-button type="danger" text="立即购买" />
        </van-action-bar>

        <!-- 自定义弹出面板 -->
        <van-action-sheet v-model:show="isshowsheet" title="标题">
            <div class="content">
                <!-- 上部分 -->
                <div class="top">
                    <div class="left">
                        <img :src="(infoobj as Iinfoobj).list_pic_url" alt="">
                    </div>
                    <div class="right">
                        <p>价格:{{ (infoobj as Iinfoobj).retail_price }}元</p>
                        <p>剩余{{ (infoobj as Iinfoobj).goods_number }}件</p>
                    </div>
                </div>
                <div class="bottom">
                    <span>购买数量</span>
                    <van-stepper v-model="num" min="1" :max="(infoobj as Iinfoobj).goods_number" />
                </div>
                <!-- 加入购入车 -->
                <van-action-bar>
                    <van-action-bar-button type="warning" @click="addCarFn" text="加入购物车" />
                    <van-action-bar-button type="danger" text="立即购买" />
                </van-action-bar>
            </div>
        </van-action-sheet>

    </div>
</template>

<script setup lang='ts'>
import { useRoute } from 'vue-router';
// 导入接口
import { getgoodsdetail, getgoodsrelated, addcarapi, getcartgoodsAmount } from '@/api/detail';
// 导入响应钩子函数
import { ref } from 'vue'
// 导入数据类型 
import type { Igallaryitem, Iinfoobj, Iattributeitem, Igoodsrelateditem } from '@/types/detail'
// 引入轮播图组件
import Myswiper from '@/components/Myswiper.vue'
// 导入提示组件方法
import { showToast } from 'vant'

// 获取路由参数
const route = useRoute();
// console.log('route', route.query.id);
let id = route.query.id
const galleryArr = ref<Array<Igallaryitem>>([]) // 轮播图数组
const infoobj = ref<Iinfoobj | {}>({})  // 商品信息对象
const attributeArr = ref<Array<Iattributeitem>>([]) // 商品的属性
const goodsrelatedArr = ref<Array<Igoodsrelateditem>>([])  // 相关产品数组
const productListArr = ref<Array<{ id: number, goods_id: number }>>([]) // 当前商品的产品列表(数组中只有当前商品的信息)
// 请求详情页数据
getgoodsdetail({ id: id as string }).then(res => {
    // console.log(res);
    const { attribute, info, comment, gallery, issue, productList } = res.data.data
    // console.log('gallery', gallery);
    let newgalleryArr = gallery.map((item: any) => {
        return { image_url: item.img_url, id: item.id }
    })
    // console.log(22, newgalleryArr);
    galleryArr.value = newgalleryArr
    infoobj.value = info
    attributeArr.value = attribute
    productListArr.value = productList
})

// 获取商品相关产品接口
getgoodsrelated({ id: id as string }).then(res => {
    // console.log(33, res);
    goodsrelatedArr.value = res.data.data.goodsList

})

// 弹出面板
const isshowsheet = ref<boolean>(false) // 是否显示弹出面板
const num = ref<number>(1); // 购买数量
// 点击加入购物车
const addCarFn = () => {
    //调用加入购物车接口

    console.log(productListArr.value[0].goods_id.toString());
    console.log(productListArr.value[0].id + '');
    console.log(num.value);

    addcarapi({
        goodsId: productListArr.value[0].goods_id.toString(),
        productId: productListArr.value[0].id + '',
        number: num.value
    }).then(res => {

        if (res.data.errno == 0) {
            // 提示加入购物车
            showToast({
                message: '加入购物车',
                type: 'success',
                duration: 1000,
                onClose() {
                    // 隐藏弹出面板
                    isshowsheet.value = false
                }
            })
            // 更新购物车总数量
            goodscount.value = res.data.data.cartTotal.goodsCount
        }
    })
}

// 获取购物车数据请求
const goodscount = ref<number>(0)
const gettotal = () => {
    getcartgoodsAmount().then(res => {
        // console.log(11, res);
        goodscount.value = res.data.data.cartTotal.goodsCount
    })
}
gettotal() // 初始化请求购物车总数量


</script>
<style lang="scss" scoped>
::v-deep .goods_desc img {
    width: 100%;
    display: block;
}

.goodsrelated {
    display: flex;
    flex-wrap: wrap;

    li {
        width: 50%;

        img {
            width: 100%;
        }
    }
}

.content {
    padding: 16px 16px 160px;
    display: flex;
    flex-direction: column;

    .top {
        display: flex;

        .left {
            img {
                width: 96px;
                height: 96px;
            }
        }
    }

    .bottom {
        display: flex;
        justify-content: space-between;
    }
}
</style>